<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>会员端装修</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>
    <style>
        body,
        html {
            height: 100%;
            background: #fff;
        }

        .nodeover .layui-tree-iconClick,
        .nodeover .layui-tree-txt {
            color: #009688;
            font-weight: bold;
        }

        .divnodecontext {
            height: calc(100% - 150px);
        }
    </style>
</head>

<body>
    <div class="layui-layout-body">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label">医疗机构：</label>
                        <div class="layui-input-block">
                            <select name="workId" id="workId" lay-filter="workId"></select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="btnpreview"
                            id="btnpreview">
                            <i class="layui-icon layuiadmin-button-btn layui-icon-search"></i>预览会员端
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-card-body divnodecontext" id="nodecontext">
                <div class="layui-row">
                    <div class="layui-col-md2">
                        <div id="Left" style="overflow: auto;min-height: 600px;">
                        </div>
                    </div>
                    <div class="layui-col-md10">
                        <script type="text/html" id="barRowopertion">
                            <a class="layui-btn layui-btn-xs" lay-event="alter"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                            {{# if(d.DelFlag==0){ }}
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable"><i class="layui-icon layui-extend-stop"></i>停用</a>
                            {{# } else { }}
                            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-ok"></i>启用</a>
                            {{# } }}
                        </script>
                        <script type="text/html" id="barRowtext">
                            {{# if(d.DelFlag==1){ }}
                            <span style="color:red">停用</span>
                            {{# } else { }}
                            <span style="color:blue">启用</span>
                            {{# } }}
                        </script>
                        <script type="text/html" id="toolbar">
                            <a class="layui-btn layui-btn-sm" lay-event="init-submit"><i class="layui-icon layui-icon-add-1"></i>初始化</a>
                        </script>
                        <table id="decoTable" lay-filter="decoTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>


<script type="text/javascript">
    lobsterlayui.main(['index', 'layer', 'form', 'element', 'table', 'tree'], {
        data: {
            $layui: null,
            right: null,
            tabledeco: null,
            treeoptions: {},
            treeselectednodedata: {},
        },
        pageload: function (right) {
            var self = this;
            this.data.right = right;
            this.initevent();
            this.loadselectworker(function () {
                self.data.tabledeco = self.loadtable();
            })
        },
        initevent() {
            var self = this;

            //预览
            layui.form.on('submit(btnpreview)', function (data) {
                layer.open({
                    type: 2
                    , title: '预览会员端'
                    //, btn: ['保存', '取消']
                    , content: "/customer/index.html?WorkId=" + $('#workId').val()
                    , area: ['480px', '640px']  //宽，高
                    , success: function (layero, index) {

                    }
                    , cancel: function (index, layero) {

                    }
                    , yes: function (index, layero) {

                    }
                });
            });

            self.data.treeoptions = {
                elem: '#Left',
                isJump: true,
                onlyIconControl: true,
                autoRefresh: true,
                customOperate: true,
                data: [{
                    title: '首页'
                    , id: 1
                },
                {
                    title: '我的'
                    , id: 2
                },],
                edit: [], //操作节点的图标
                operate: function (obj) {
                },
                click: function (obj) {
                    var data = obj.data;
                    self.data.treeselectednodedata = data;
                    self.data.tabledeco.reload({
                        where: {
                            workid: $('#workId').val(),
                            pageid: self.data.treeselectednodedata.id || 1
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    $("#Left .nodeover").removeClass("nodeover");
                    $(obj.elem).find(".layui-tree-main").eq(0).addClass("nodeover");

                    if (this.clickfun && data.id > 0) {
                        this.clickfun(data.id, data.title);
                    }
                },
                clickfun: null
            };

            layui.tree.render(self.data.treeoptions);

            // 监听行工具事件
            layui.table.on("tool(decoTable)", function (obj) {
                var data = obj.data;
                var tr = obj.tr;
                if (obj.event === "disable" || obj.event === "enable") {
                    // 启用停用消息类型
                    var confirm_msg = "";
                    var status = 0;
                    if (data.DelFlag == 0) {
                        confirm_msg = "确认停用么?";
                        status = 1;
                    }
                    else {
                        confirm_msg = "确认启用么?";
                        status = 0;
                    }

                    layer.confirm(confirm_msg, { icon: 3, title: "提示" },
                        function (index) {
                            lobsterlayui.GET('/admin/v1/CDecoration/StopDecoration', { Id: data.Id, status: status }).then(retdata => {
                                layer.close(index); //关闭弹层
                                layer.msg("处理成功");
                                self.data.tabledeco.reload();// 数据刷新
                            })
                        });
                }
                else if (obj.event === "alter") {
                    // 修改用户协议
                    var index = layer.open({
                        type: 1,
                        title: "编辑页面",
                        btn: ["保存", "取消"],
                        btnAlign: "r",
                        content: $('#dlg_addform').html(),
                        area: ["800px", "80%"],
                        success: function (layero, index) {
                            $("#LAY-form-reset").trigger('click');
                            data.JsonData = JSON.stringify(JSON.parse(data.JsonData), null, '\t');
                            layui.form.val('layuiadmin-form-agreement', data);
                        },
                        yes: function (index, layero) {

                            var submit = $("#btnSubmit");
                            //监听提交
                            layui.form.on("submit(btnSubmit)", function (formdata) {
                                var load = layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                                var field = formdata.field;
                                try{
                                    JSON.parse(field.JsonData);
                                }catch{
                                    layer.close(load);
                                    layer.msg("Json数据格式不对");
                                    return false;
                                }
                                 
                                lobsterlayui.POST('/admin/v1/CDecoration/SaveDecoration', field).then(retdata => {
                                    layer.close(load);
                                    layer.close(index);
                                    layer.msg("保存成功");
                                    self.data.tabledeco.reload(); //数据刷新
                                })
                            });
                            submit.trigger("click");
                        },
                        btn2: function (index, layero) {
                            tr.removeAttr("class");

                        },
                        cancel: function () {
                            tr.removeAttr("class");

                        }
                    });

                }
            });

            // 点击添加用户协议
            layui.table.on("toolbar(decoTable)", function (obj) {
                if (obj.event == "init-submit") {
                    lobsterlayui.GET('/admin/v1/CDecoration/InitCDecorationData', { workid: $('#workId').val(), pageid: self.data.treeselectednodedata.id || 1 }).then(retdata => {
                        layer.msg("初始化成功");
                        self.data.tabledeco.reload();
                    }).catch(res => {
                        layer.msg(res.msg);
                    })
                }
            });
        },
        loadselectworker(callback) {
            var self = this;
            //获取机构数据
            lobsterlayui.GET('/admin/v1/worker/GetSelectWorkerDataByUser').then(data => {
                //医疗机构
                var workers = data["Workers"];
                $("#workId").html("");
                $.each(workers, function (i, item) {
                    $("#workId").append("<option value=\"" + item.WorkId + "\">" + item.WorkName + "</option>");
                });

                $('#workId').val(self.data.right.WorkId);//默认选择当前登录机构
                //重新渲染
                layui.form.render("select");

                if (callback) {
                    callback();
                }
            })
        },
        loadtable() {
            var self = this;
            return layui.table.render({
                elem: "#decoTable",
                headers: lobsterlayui.GetHeaderData(),
                where: {
                    workid: $('#workId').val(),
                    pageid: self.data.treeselectednodedata.id || 1
                },
                height: "full-130",
                toolbar: "#toolbar",
                cellMinWidth: 80, //全局定义常规单元格的最小宽度
                url: '/admin/v1/CDecoration/GetCDecorationData',  //控制器名称，方法名称
                //page: true, //开启分页
                //limit: 10,
                //even: true,
                loading: true,
                cols: [[ //表头
                    { field: 'PageName', title: '页面名称', width: '100' }
                    , { field: 'SectionCode', title: '栏目代码', width: '100' }
                    , { field: 'SectionName', title: '栏目名称', width: '150' }
                    , { field: 'JsonData', title: '数据', width: '400' }
                    , { field: 'Sort', title: '排序', width: '80' }
                    , { field: 'Memo', title: '备注', width: '200' }
                    , { field: '', title: '状态', width: '100', templet: "#barRowtext" }
                    , { title: "操作", width: "200", align: 'center', toolbar: "#barRowopertion" }
                ]],
                parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.total,
                        data: res.data.data
                    }
                }
            });
        }
    })
</script>

<script type="text/html" id="dlg_addform">
    <form class="layui-form" lay-filter="layuiadmin-form-agreement" id="layuiadmin-form-agreement" style="padding: 20px 30px 0 0;">
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color:red;">*&ensp;</i>栏目代码</label>
            <div class="layui-input-block">
                <input type="text" name="SectionCode" lay-verify="required" maxlength="20" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color:red;">*&ensp;</i>栏目名称</label>
            <div class="layui-input-block">
                <input type="text" name="SectionName" lay-verify="required" maxlength="200" placeholder="请输入栏目名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color:red;">*&ensp;</i>排序</label>
            <div class="layui-input-block">
                <input type="text" name="Sort" lay-verify="required" maxlength="20" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color:red;">*&ensp;</i>数据</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="JsonData" placeholder="" rows="20"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="Memo" placeholder=""></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="text" name="WorkId">
            <input type="text" name="PageId">
            <input type="text" name="PageName">
            <input type="text" name="DelFlag" value="0">
            <input type="text" name="Id" value="0">   
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="btnSubmit" id="btnSubmit" value="确认">
            <input type="reset" id="LAY-form-reset" value="重置">
        </div>

    </form>
</script>